<script setup>
import {
  Plus,
  Search,
  Star,
  User,
  ChatDotRound,
  Message,
  MoreFilled,
  VideoCamera,
  Phone,
  Menu,
  Folder,
  Microphone,
  PictureFilled,
  Timer,
  PictureRounded,
  ArrowDown,
  ArrowUp,
  ArrowRight,
  Close,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref, nextTick, onMounted } from 'vue'
import { useUserStore } from '@/stores'
import { getPolicyApi, getUrlApi } from '@/api/oss'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { getChatContentApi, getLastMessageApi } from '@/api/message'
import { getFriendListApi } from '@/api/friend'
import { sendMessageApi } from '@/api/message'
import { getGroupListApi, searchGroupApi, getAllGroupListApi } from '@/api/group'
import { getAllUserApi, searchUserApi, getFriendApplyListApi } from '@/api/user'
const avatarUrl = ref('')
const router = useRouter()
const userInfo = useUserStore().getUser()
const loading = ref(false)
//区别是群申请通知还是好友申请通知
const applyType = ref('')
//好友申请
const addFriendNum = ref(0)
//群申请
const addGroupNum = ref(0)

// 消息内容
const msg = ref('')
// 按下回车键标志
const flag_enter = ref(true)
// 点击发送按钮标志
const flag_click = ref(false)
// 一级导航栏
const nav_first = ref(1)
const nav = ref(1)
const friendListLabel = ref(['我的设备', '特别关心', '我的好友'])
const groupListLabel = ref(['置顶群聊', '我加入的群聊'])
// 联系人列表
const chatList = ref([])
//好友列表
const friendList = ref([])
//群列表
const groupList = ref([])
// 添加好友弹窗
const flag_addIndex = ref(false)
// 添加好友
const flag_addFriend = ref(false)
//
const Item = ref({})

//oss上传协议
const policyData = ref({})

let ws = null

const emoji_list = ref([
  '😀',
  '😁',
  '😅',
  '😎',
  '🤓',
  '🧐',
  '🤣',
  '🤪',
  '✌🏻',
  '🤡',
  '🤫',
  '🙄',
  '😝',
  '🥺',
  '😍',
  '😘',
  '😇',
  '😊',
  '😉',
  '😋',
  '😜',
  '🤩',
  '🥰',
  '🤗',
  '🤭',
  '🤔',
  '🤨',
  '😐',
  '😑',
  '😶',
  '😏',
  '😒',
  '🙃',
  '😌',
  '😔',
  '😷',
  '🤒',
  '🤕',
  '🤢',
  '🤮',
  '🤧',
  '🥵',
  '🥶',
  '😳',
  '🤯',
  '😱',
  '😨',
  '😰',
  '😥',
  '😓',
  '🤥',
  '😭',
  '😤',
  '😡',
  '🤬',
  '👋',
  '🤚',
  '🖐',
  '✋',
  '🖖',
  '👌',
  '🤏',
  '✌️',
  '🤞',
  '🤟',
  '🤘',
  '🤙',
  '👈',
  '👉',
  '👆',
  '🖕',
  '👇',
  '👍',
  '👎',
])
//聊天记录 格式{ id: 1, type: 'receive', content: '你好！', imageUrl: '' ,videoUrl: ''  }
const chatItems = ref([])
//聊天对象
const chatter = ref(1)
//选中的聊天对象
const selectedChatter = ref({})
// 滚动到底部函数
const scrollToBottom = () => {
  const scrollContainer = document.querySelector('.chat-frame .el-scrollbar__wrap')
  if (scrollContainer) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight
  }
}

//选择哪个聊天联系人
const handleItem = (item) => {
  //清空聊天记录
  chatItems.value = []
  chatter.value.id = item.id
  chatter.value.type = item.type
  selectedChatter.value = item

  //获取当前聊天内容
  getChat()
}

//发送消息
const handleSend = () => {
  //判断消息是否为空
  if (msg.value.trim() === '') {
    msg.value = ''
    ElMessage.warning('消息不能为空')
    return
  }

  //去除末尾的换行
  if (flag_enter.value) {
    msg.value = msg.value.replace(/(\n|\r)+$/g, '')
  } else {
    if (!flag_click.value) return
  }

  //滑动到底部
  nextTick(scrollToBottom)
  sendMessage(msg.value)
  //清空
  msg.value = ''
  flag_click.value = false
}

//发信息
const sendMessage = async (message) => {
  //发送消息
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(userInfo.userId + '|' + message)
    //*********特殊处理***********
    const type = ref()
    const split = message.split('|')
    message = split[split.length - 1]
    if (split.length == 1) type.value = 0
    else if (split.length == 2) type.value = 1
    else if (split.length == 3) type.value = 2

    await sendMessageApi({
      senderId: userInfo.userId,
      receiverId: selectedChatter.value.id,
      content: message,
      receiverType: selectedChatter.value.type,
      type: type.value,
    })
  }
}

//时间处理函数
const formatDate = () => {
  const date = new Date()
  const hour = date.getHours()
  const minute = date.getMinutes()
  return `T ${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}`
}

//判断信息内容
const handleType = (split) => {
  //判断是否是文字
  if (split[1]) {
    chatItems.value.push({
      id: split[0],
      type: split[0] == userInfo.userId ? 'send' : 'receive',
      content: split[1],
      sentTime: formatDate(),
    })

    //判断是否是图片
  } else if (split[2]) {
    chatItems.value.push({
      id: split[0],
      type: split[0] == userInfo.userId ? 'send' : 'receive',
      content: '',
      imageUrl: split[2],
      sentTime: formatDate(),
    })
  }
  //判断是否是视频
  else if (split[3]) {
    chatItems.value.push({
      id: split[0],
      type: split[0] == userInfo.userId ? 'send' : 'receive',
      content: '',
      imageUrl: '',
      videoUrl: split[3],
      sentTime: formatDate(),
    })
  }
}

//获取联系列表
const getContactList = async () => {
  await Promise.all([getFriendListApi(userInfo.userId), getGroupListApi(userInfo.userId)]).then(
    async (res) => {
      //处理好友列表
      friendList.value = res[0].data.data
      //处理群列表
      groupList.value = res[1].data.data

      //处理聊天列表
      chatList.value = [...friendList.value, ...groupList.value]

      if (chatList.value.length == 0) {
        ElMessage.warning('暂无联系人')
        return
      }
      selectedChatter.value = chatList.value[0]

      await Promise.all(
        chatList.value.map(async (item) => {
          const res = await getLastMessageApi(userInfo.userId, item.id, item.type)

          //2025-07-17T15:41:18  -> 2025-07-17 15:41,并去除秒
          if (res.data.data.lastTime)
            res.data.data.lastTime = res.data.data.lastTime.replace('T', ' ').slice(0, -3)

          item.lastMessage = res.data.data
          if (item.lastMessage.type == 'image') item.lastMessage.lastMsg = '[照片]'
        }),
      )

      //排序
      chatList.value.sort((a, b) => {
        return new Date(b.lastMessage.lastTime) - new Date(a.lastMessage.lastTime)
      })

      chatter.value = {
        id: chatList.value[0].id,
        type: chatList.value[0].type,
      }
    },
  )
}

//获取当前聊天对象聊天记录
const getChat = async () => {
  const data = {
    senderId: userInfo.userId,
    receiverId: selectedChatter.value.id,
    receiverType: selectedChatter.value.type,
  }
  //获取当前聊天内容
  const res = await getChatContentApi(data)
  chatItems.value = res.data.data.map((item) => {
    return {
      id: item.senderId,
      type: item.senderId == userInfo.userId ? 'send' : 'receive',
      content: item.type == 'text' ? item.content : '',
      imageUrl: item.type == 'image' ? item.content : '',
      videoUrl: item.type == 'file' ? item.content : '',
      sentTime: item.sentTime,
    }
  })
  // 滚动到底部
  nextTick(scrollToBottom)
}

onMounted(async () => {
  const res = await getFriendApplyListApi(userInfo.userId)

  addFriendNum.value = res.data.data.length
  await getContactList()

  await getChat()

  avatarUrl.value = userInfo.avatar

  //获取websocket连接
  ws = new WebSocket('ws://localhost:8081/ws1')

  ws.onmessage = (event) => {
    const split = event.data.split('|')
    //判断消息类型
    handleType(split)

    //更新
    getContactList()
    // 滚动到底部
    nextTick(scrollToBottom)
  }
})

//处理发信息的状态
const handleMsgStatus = (command) => {
  flag_enter.value = command == '1'
}

//上传文件前
const beforeUpload = async (file) => {
  const fileName = file.name
  //上传文件
  const res = await getPolicyApi()
  policyData.value = res.data.data
  policyData.value.key = policyData.value.dir + fileName
}

//上传文件后
const handleSuccess = async () => {
  //获取url
  const {
    data: { data },
  } = await getUrlApi(policyData.value.key)

  //判断fileName后缀
  const suffix = policyData.value.key.split('.').pop()

  //判断文件类型
  if (suffix == 'png' || suffix == 'jpg' || suffix == 'jpeg') {
    sendMessage('|' + data)
  } else if (suffix == 'mp4') {
    sendMessage('|' + '|' + data)
  }
}

//处理一级导航栏
const handleSelect = (index) => {
  if (index == 5) {
    return
  }
  nav_first.value = index
  if (index == 1)
    //重新渲染
    getContactList()
}

//处理退出登录逻辑
const handleLogout = () => {
  //确认退出
  ElMessageBox.confirm('确定退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    //跳转登录页面
    setTimeout(() => {
      router.push('/login')
    }, 500)

    //清除用户信息,token
    useUserStore().setUser({})
    localStorage.removeItem('token')

    ElMessage.success('退出成功')
  })
}
const flag = ref(false)

//退出或刷新页面，关闭websocket
window.onbeforeunload = () => {
  ws.close()
}

//添加好友弹窗
const handleAddFriend = () => {
  flag_addIndex.value = true
}

const handleClose = () => {
  flag_addIndex.value = false
}
//添加好友
const handleFriendOpen = (item) => {
  Item.value = item
  flag_addFriend.value = true
}
const handleFriendClose = () => {
  flag_addFriend.value = false
}

//************************加好友************************

//一级导航栏
const nav1_first = ref(['全部', '好友', '群聊'])
//二级导航栏
const nav1_second = ref(['推荐', '游戏', '动漫', '学习', '音乐', '影视', '其他'])
//被选择的一级导航栏
const nav1_current = ref('全部')
//被选择的二级导航栏
const nav1_current_second = ref('推荐')
//搜索结果列表
const resultList = ref([])

// 输入框内容
const searchText = ref('')

// 回车搜索按钮事件
const handleSearch = async () => {
  // 先清空搜索结果列表
  resultList.value = []
  // 调用搜索接口
  const res1 = await searchUserApi(searchText.value)
  const res2 = await searchGroupApi(searchText.value)
  // 合并搜索结果
  const res = { data: { data: [...res1.data.data, ...res2.data.data] } }
  // 处理搜索结果
  if (res.data.data.length > 0) {
    // 处理搜索结果
    resultList.value = res.data.data
  } else {
    // 没有搜索结果
    resultList.value = []
  }
}

const getData = async () => {
  const groupList = await getAllGroupListApi()
  const userList = await getAllUserApi(userInfo.userId)
  resultList.value = [...groupList.data.data, ...userList.data.data]
  //对有用户名的属性的元素加一个属性type：user
  resultList.value.forEach((item) => {
    if (item.username) {
      item.type = 'user'
    }
  })
}

// 页面加载完成后执行
onMounted(() => {
  getData()
})

//查看通知列表
const handleLookNotice = (type) => {
  applyType.value = type
}

// 选择搜索结果
const Index = ref(0)
// 是否 查看好友信息
const flag_lookFriend = ref(false)
//好友信息
const Item_friend = ref({})
//跳转发信息页面
const handleMessage = (item) => {
  //一级导航栏
  nav_first.value = 1
  //二级导航栏
  nav.value = 1
  //被选择的联系人
  selectedChatter.value = item
  //
  chatter.value = {
    id: item?.id,
    type: item?.type,
  }
  //获取当前聊天内容
  getChat()

  //滑动到底部
  nextTick(scrollToBottom)
}
</script>

<template>
  <create-group class="create-group"></create-group>
  <div class="home-box">
    <el-container>
      <!--左部导航栏-->
      <el-aside class="left">
        <div class="left-box">
          <div class="left-top">
            <div class="logo"><img src="@/assets/left-logo.png" /></div>
            <div class="avatar">
              <el-popover class="avatar-popover" placement="right" width="250px">
                <template #reference>
                  <el-link underline="never"><img :src="avatarUrl" /></el-link>
                </template>
                <div class="info-detail">
                  <div class="header">
                    <div class="img">
                      <img :src="avatarUrl" />
                    </div>
                    <div class="name">
                      <div class="username">
                        {{ userInfo.username ? userInfo.username : 'username' }}
                      </div>
                      <div class="account">QQ:2316520653</div>
                      <div class="label">🤩元气满满</div>
                    </div>
                    <div class="like">
                      <el-link underline="never">
                        <img src="@/assets/like-N.png" />
                      </el-link>
                      <div class="num">0</div>
                    </div>
                  </div>
                  <div class="where">
                    <div class="label">所在地</div>
                    <div>湖南株洲</div>
                  </div>
                  <div class="space">
                    <div class="label">空间</div>
                    <div class="photoList">
                      <img src="@/assets/scenery1.png" />
                      <img src="@/assets/scenery2.png" />
                    </div>
                  </div>
                  <div class="edit-btn">
                    <el-button>编辑资料</el-button>
                    <el-button type="primary">发信息</el-button>
                  </div>
                </div>
              </el-popover>
            </div>
          </div>
          <div class="left-bottom">
            <!---悬停颜色-->
            <el-menu
              active-text-color="skyblue"
              default-active="1"
              class="el-menu-vertical-demo"
              style="border: none"
              @select="handleSelect"
            >
              <el-menu-item index="1">
                <el-icon><ChatDotRound /></el-icon>
              </el-menu-item>
              <el-menu-item index="2">
                <el-badge is-dot class="item" :offset="[-5, 15]">
                  <el-icon><User /></el-icon>
                </el-badge>
              </el-menu-item>
              <el-menu-item index="3">
                <el-icon><Star /></el-icon>
              </el-menu-item>
              <el-menu-item index="4">
                <el-icon><Message /></el-icon>
              </el-menu-item>
              <el-menu-item index="5">
                <el-popover placement="right">
                  <template #reference>
                    <el-icon><MoreFilled /></el-icon>
                  </template>
                  <el-button @click="handleLogout" style="border: none; width: 100%"
                    >退出登录</el-button
                  >
                </el-popover>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-aside>
      <!--中间聊天列表-->
      <el-main v-if="nav_first != 3" class="center">
        <!--搜索框-->
        <div class="search-box">
          <div class="search">
            <el-input :prefix-icon="Search" placeholder="搜索"></el-input>
            <el-popover placement="right-start">
              <template #reference><el-button class="add-btn" :icon="Plus"></el-button></template>
              <div class="options">
                <button><img src="@/assets/createGroup.png" />创建群聊</button>
                <button @click="handleAddFriend">
                  <img src="@/assets/addFriend.png" />加好友/群
                </button>
              </div>
            </el-popover>
          </div>
          <el-divider></el-divider>
        </div>
        <!--聊天列表 -->
        <div v-if="nav_first == 1" class="person-list">
          <el-scrollbar class="scrollbar" height="573px">
            <div
              :style="{
                backgroundColor:
                  chatter.id == item.id && chatter.type === item.type ? 'rgb(245, 245, 245)' : '',
              }"
              v-for="item in chatList"
              :key="item.id"
              class="item"
              @click="handleItem(item)"
            >
              <div class="img"><img :src="item.avatar" /></div>
              <div class="detail">
                <div class="name">{{ item.name }}</div>
                <div v-if="item.type === 'user'" class="content">
                  {{ item.lastMessage?.lastMsg }}
                </div>
                <div v-else-if="item.type === 'group'" class="content">
                  {{ item.lastMessage?.username }}{{ item.lastMessage?.username ? ':' : '' }}

                  {{ item.lastMessage?.lastMsg }}
                </div>
              </div>
              <div class="tip">
                <div class="time">{{ item.lastMessage?.lastTime }}</div>
                <div class="notice">99+</div>
              </div>
            </div>
            <p v-if="loading" style="text-align: center">Loading...</p>
          </el-scrollbar>
        </div>

        <!--好友列表 | 群列表-->
        <div class="friend-list" v-if="nav_first == 2">
          <div class="friend-manege"><el-button :icon="User">好友管理器</el-button></div>
          <div class="notice">
            <el-badge
              @click="(handleLookNotice('friend'), (flag_lookFriend = false))"
              :value="addFriendNum"
              :show-zero="false"
              class="friend-notice"
              :offset="[-5, 5]"
            >
              <div class="text">好友通知</div>
              <div class="icon">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </el-badge>
            <el-badge
              @click="(handleLookNotice('group'), (flag_lookFriend = false))"
              :value="addGroupNum"
              :show-zero="false"
              class="friend-notice"
              :offset="[-5, 5]"
            >
              <div class="text">群通知</div>
              <div class="icon">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </el-badge>
          </div>
          <div class="list-box">
            <div
              @click="nav = 1"
              class="friend"
              :style="{
                backgroundColor: nav == 1 ? 'white' : '',
                color: nav == 1 ? 'skyblue' : '',
              }"
            >
              好友
            </div>
            <div
              @click="nav = 2"
              class="group"
              :style="{
                backgroundColor: nav == 2 ? 'white' : '',
                color: nav == 2 ? 'skyblue' : '',
              }"
            >
              群聊
            </div>
          </div>
          <!--具体-好友列表-->
          <div v-if="nav == 1" class="friend-list-box">
            <div class="item" v-for="(item, index) in friendListLabel" :key="item">
              <div @click="((flag = !flag), (Index = index))" class="head">
                <div class="icon">
                  <el-icon><ArrowRight /></el-icon>
                  <span>&nbsp;&nbsp;{{ item }}</span>
                </div>
                <div class="num">{{ friendList.length }}</div>
              </div>
              <div>
                <div v-if="item == '我的设备' && flag == true && Index == 0" class="list">
                  <list-index></list-index>
                </div>
                <div v-else-if="item == '特别关心' && flag == true && Index == 1" class="list">
                  <list-index></list-index>
                </div>
                <div
                  v-for="item in friendList"
                  :key="item.id"
                  v-else-if="item == '我的好友' && flag == true && Index == 2"
                  class="list"
                >
                  <list-index
                    :item="item"
                    @click="((flag_lookFriend = true), (Item_friend = item))"
                  ></list-index>
                </div>
              </div>
            </div>
          </div>
          <!--具体-群列表-->
          <div v-else class="group-list-box">
            <div class="item" v-for="(item, index) in groupListLabel" :key="item">
              <div @click="((flag = !flag), (Index = index))" class="head">
                <div class="icon">
                  <el-icon><ArrowRight /></el-icon>
                  <span>&nbsp;&nbsp;{{ item }}</span>
                </div>
                <div class="num">1</div>
              </div>
              <div>
                <div v-if="item == '置顶群聊' && flag == true && Index == 0" class="list">
                  <list-index :item="item"></list-index>
                </div>

                <div
                  v-else-if="item == '我加入的群聊' && flag == true && Index == 1"
                  class="list"
                  v-for="item in groupList"
                  :key="item.id"
                >
                  <list-index
                    :item="item"
                    @click="((flag_lookFriend = true), (Item_friend = item))"
                  ></list-index>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
      <!--右部main窗口（聊天,动态）-->
      <el-aside class="right">
        <!--聊天-->
        <div class="chat" v-if="nav_first == 1">
          <div class="chat-header">
            <div class="chat-title">
              <div class="name">
                {{ selectedChatter.name
                }}{{ selectedChatter.num > 0 ? `(${selectedChatter.num})` : '' }}
              </div>
              <div class="fuc">
                <el-link underline="never"
                  ><el-icon><Phone /></el-icon
                ></el-link>
                <el-link underline="never"
                  ><el-icon><VideoCamera /></el-icon
                ></el-link>
                <el-link underline="never"
                  ><el-icon><Menu /></el-icon
                ></el-link>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="chat-content">
            <div class="chat-frame">
              <el-scrollbar class="scrollbar" height="400px">
                <div v-for="item in chatItems" :key="item.id" class="chat-item">
                  <!-- 根据消息类型显示不同组件 -->
                  <receive-msg v-if="item.type === 'receive'" :item="item" />
                  <send-msg v-else :item="item" :avatarUrl="avatarUrl" />
                </div>
              </el-scrollbar>
            </div>
            <el-divider></el-divider>
            <div class="send-box">
              <div class="icon">
                <div class="left">
                  <!--表情包列表-->
                  <el-popover placement="top" width="350px">
                    <template #reference>
                      <el-link underline="never"
                        ><el-icon><PictureRounded /></el-icon>
                      </el-link>
                    </template>
                    <div class="emoji_list">
                      <div @click="msg += item" v-for="(item, index) in emoji_list" :key="index">
                        <el-link underline="never" style="font-size: 20px">{{ item }}</el-link>
                      </div>
                    </div>
                  </el-popover>
                  <el-link underline="never"
                    ><el-icon><Folder /></el-icon>
                    <el-upload
                      :on-success="handleSuccess"
                      accept="video/*"
                      :action="policyData.host"
                      :before-upload="beforeUpload"
                      :data="policyData"
                      style="position: absolute; left: 5px; width: 20px; height: 20px; opacity: 0"
                      >11</el-upload
                    >
                  </el-link>

                  <!--发送图片-->
                  <el-link class="file-item" underline="never"
                    ><el-icon><PictureFilled /></el-icon>
                    <el-upload
                      :on-success="handleSuccess"
                      accept="image/*"
                      :action="policyData.host"
                      :before-upload="beforeUpload"
                      :data="policyData"
                      style="position: absolute; left: 5px; width: 20px; height: 20px; opacity: 0"
                      >11</el-upload
                    >
                  </el-link>

                  <el-link class="file-item" underline="never"
                    ><el-icon><Microphone /></el-icon
                  ></el-link>
                </div>
                <div class="right">
                  <el-link underline="never"
                    ><el-icon><Timer /></el-icon
                  ></el-link>
                </div>
              </div>
              <div class="send-content">
                <el-input
                  @keyup.enter="handleSend"
                  resize="none"
                  :rows="4"
                  type="textarea"
                  placeholder="请输入消息内容"
                  v-model="msg"
                ></el-input>
              </div>
              <div class="send-btn">
                <div>
                  <el-dropdown placement="top" @command="handleMsgStatus">
                    <el-button style="width: 30px">
                      <el-icon v-if="flag_enter"><ArrowDown /></el-icon>
                      <el-icon v-else><ArrowUp /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="1"
                          >{{ flag_enter ? '✓' : '' }} 按Enter键发送信息</el-dropdown-item
                        >
                        <el-dropdown-item command="2"
                          >{{ flag_enter ? '' : '✓' }}取消按Enter键发送信息</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                <el-button @click="((flag_click = true), handleSend())" type="primary"
                  >发送</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <!--好友-->
        <div class="friend" v-else-if="nav_first == 2 && !flag_lookFriend">
          <img v-if="!applyType" src="@/assets/qq.png" />
          <notice-list :applyType="applyType" v-else></notice-list>
        </div>
        <div v-else-if="flag_lookFriend" class="dynamic">
          <info-index @handleMessage="handleMessage" :item="Item_friend"></info-index>
        </div>

        <!--动态-->
        <div v-if="nav_first == 3" class="dynamic"></div>
      </el-aside>
      <el-main v-if="nav_first == 3" class="right">111</el-main>
    </el-container>
  </div>

  <!--加好友模块-begin-->
  <div class="main-index" v-if="flag_addIndex">
    <!--关闭按钮-->
    <div class="close">
      <el-link @click="handleClose" underline="never">
        <el-icon><Close /></el-icon
      ></el-link>
    </div>
    <div class="title">全网搜索</div>
    <!-- 搜索框 -->
    <div class="search-container">
      <!--监听回车事件-->
      <el-input
        @keyup.enter="handleSearch"
        clearable
        type="text"
        placeholder="请输入要搜索的QQ号或昵称"
        v-model="searchText"
      />
    </div>
    <!--一级导航栏-->
    <div class="filter">
      <div v-for="(item, index) in nav1_first" :key="index">
        <el-link
          :style="{ color: nav1_current === item ? 'skyblue' : 'black' }"
          @click="nav1_current = item"
          underline="never"
          >{{ item }}</el-link
        >
      </div>
    </div>
    <!--二级导航栏-->
    <div v-if="nav1_current === '全部'" class="second-filter">
      <div v-for="(item, index) in nav1_second" :key="index">
        <el-link
          :class="{ active: nav1_current_second === item }"
          @click="nav1_current_second = item"
          underline="never"
          >{{ item }}</el-link
        >
      </div>
    </div>
    <!--搜索结果-空结果-->
    <div v-if="resultList.length === 0" class="empty-result">
      <div class="img"><img src="@/assets/empty.png" /></div>
      <div class="text">暂无搜索结果</div>
    </div>
    <!--搜索结果-有结果-->
    <div class="result">
      <div class="item" v-for="item in resultList" :key="item.name">
        <div class="head">
          <div class="img"><img :src="item.avatar" /></div>
          <div class="info">
            <div class="name">{{ item.name || item.username }}</div>
            <div v-if="item.type === 'user'" class="info-user">
              <div class="age">
                <span style="color: skyblue">{{ item.gender == '男' ? '♂' : '♀' }}</span
                >{{ item.age }}
              </div>
              <div class="star">{{ item.star }}</div>
            </div>
            <div v-else class="info-group">
              <div class="label">标签</div>
              <div class="intro">{{ item.description }}</div>
            </div>
          </div>
        </div>
        <div class="tail">
          <el-button @click="handleFriendOpen(item)">{{
            item.type === 'user' ? '添加' : '加入'
          }}</el-button>
          <!-- 加好友 点击后才渲染  -->
          <add-friend
            v-if="flag_addFriend && Item == item"
            @handleFriendClose="handleFriendClose"
            :item="item"
          >
          </add-friend>
        </div>
      </div>
    </div>
  </div>
  <!--加好友模块-ending-->
</template>

<style lang="scss" scoped>
//beginning
.active {
  width: 100%;
  color: skyblue;
  background-color: rgb(234, 241, 255);
  border-radius: 5px;
}
.main-index {
  z-index: 99;
  .result {
    height: 100%;
    width: 100%;
    margin-top: 15px;

    .item:hover {
      background-color: rgb(235, 235, 235);
    }

    .item {
      justify-content: space-between;
      .head {
        display: flex;
      }
      .tail {
        margin-right: 20px;
        display: flex;
        align-items: center;
        button {
          width: 80px;
        }
      }

      .img {
        display: flex;
        align-items: center;
        img {
          margin-left: 10px;
          border-radius: 50%;
          width: 50px;
          height: 50px;
        }
      }
      .info {
        margin: 0 10px;
        color: #999;
        .name {
          color: black;
        }
      }
      .info-user {
        margin-top: 10px;
        display: flex;

        .age {
          margin-right: 15px;
        }
        div {
          background-color: rgb(245, 245, 245);
          border-radius: 5px;
        }
        font-size: 12px;
      }
      .info-group {
        .label {
          margin-bottom: 5px;
          font-size: 12px;
          div {
            background-color: #fff;
          }
        }
        .intro {
          font-size: 14px;
        }
      }
      align-items: center;
      height: 80px;

      display: flex;
    }
  }
  .empty-result {
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-items: center;
    img {
      width: 100px;
      height: 100px;
    }
  }
  .second-filter {
    display: flex;
    font-size: 8px;
    div {
      text-align: center;
      width: 35px;
      height: 20px;
      background-color: rgb(235, 235, 235);
      border-radius: 5px;
      margin: 10px 10px;
      margin-left: 30px;
    }
  }
  .filter {
    display: flex;
    margin-top: 10px;
    font-size: 12px;
    color: #999;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
    div {
      border-bottom: 2px solid skyblue;
      margin: 10px 10px;
      margin-left: 30px;
    }
  }
  /*关闭按钮 */
  .close {
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 20px;
  }
  .title {
    margin-top: 5px;
    text-align: center;
    font-size: 14px;
  }
  .search-container {
    margin-top: 10px;
    text-align: center;
    .el-input {
      width: 95%;
    }
  }
  position: absolute;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 10px;

  //居中
  width: 55%;
  height: 700px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
//ending
.options {
  text-align: center;
  img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }

  button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 100%;
    border: none;
    background-color: white;
  }
  button:hover {
    background-color: rgb(245, 245, 245);
  }
}
//好友列表 & 群列表
.friend-list {
  margin-top: -20px;

  .friend-manege {
    text-align: center;
    button {
      width: 80%;
      height: 40px;
      border: none;
      color: #000;
      background-color: rgb(240, 240, 240);
    }
    button:hover {
      background-color: rgb(219, 210, 210);
    }
  }
  .notice {
    margin-top: 20px;
    .friend-notice,
    .group-notice {
      div {
        margin: 0 15px;
      }
      font-size: 15px;
      height: 40px;
      align-items: center;
      display: flex;
      justify-content: space-between;
      width: 96%;
    }
    .group-notice {
      border-bottom: 1px dashed #ccc;
    }
    .friend-notice:hover,
    .group-notice:hover {
      background-color: rgb(245, 245, 245);
    }
  }
  .list-box {
    border-radius: 5px;
    width: 80%;
    height: 30px;
    margin: 0 auto;
    display: flex;
    background-color: rgb(245, 245, 245);
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
    .friend,
    .group {
      border-radius: 5px;
      width: 50%;

      text-align: center;
      transition: all 0.5s;
      cursor: pointer;
    }
  }
  .friend-list-box,
  .group-list-box {
    //鼠标是箭头
    cursor: context-menu;
    .item {
      .head {
        display: flex;
        justify-content: space-between;
        margin: 10px 10px;
      }

      .list {
        height: 50px;

        //display: none;
      }
      .list:hover {
        background-color: rgb(245, 245, 245);
      }

      font-size: 14px;

      align-items: center;
      .num {
        color: rgb(103, 111, 111);
        font-size: 10px;
      }
    }
  }
}
.info-detail {
  .header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .img {
      img {
        width: 70px;
        height: 70px;
        border: 1px solid #ccc;
        border-radius: 50%;
      }
    }
    .name {
      margin-left: 5px;
      margin-right: 10px;
      .username {
        font-size: 22px;
        text-align: center;
      }
      .account {
        font-size: 12px;
        margin-top: 5px;
        color: rgb(178, 178, 178);
      }
      .label {
        margin-top: 5px;
        text-align: center;
      }
    }
    .like {
      text-align: center;
      img {
        width: 20px;
        height: 20px;
      }
      .num {
        margin-top: -7px;
      }
    }
  }
  .label {
    color: rgb(178, 178, 178);
  }
  .where {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
  }
  .space {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
    .photoList {
      img {
        width: 30px;
        height: 30px;
        border-radius: 5px;
        margin-left: 5px;
      }

      display: flex;
    }
  }

  .edit-btn {
    button {
      width: 100px;
    }
    margin-top: 20px;
    text-align: center;
  }
}
.emoji_list {
  display: flex;
  //换行
  flex-wrap: wrap;
}

:deep(.el-textarea__inner) {
  border: none;
  outline: none;
  box-shadow: none;
}
.el-menu > .el-menu-item:nth-child(5) {
  margin-top: 253px;
}
.home-box {
  height: 650px;
  width: 80%;
  margin: 0 auto;
  border: 1px dashed #ccc;
  align-items: center;
  margin-top: 40px;
  border-radius: 10px;

  /* 容器继承父级高度 */
  .el-container {
    height: 100%;
    .el-aside,
    .el-main {
      /* 确保子元素撑满高度 */
      height: 100%;
    }
  }
  .left {
    width: 60px;
    border-right: 1px solid #ccc;

    .left-box {
      text-align: center;

      div {
        margin-bottom: 10px;
      }
      .left-top {
        div {
          width: 100%;
          margin-top: 20px;
        }
        .logo {
          img {
            height: 20px;
          }
        }
        .avatar {
          img {
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 50%;
          }
        }
      }
      .left-bottom {
        .el-menu-item:hover {
          background-color: rgb(245, 245, 245);
        }
        .el-icon {
          font-size: 20px;
        }
      }
    }
  }
  .center {
    padding: 0;
    .person-list {
      .el-scrollbar {
        margin-top: -43px;

        .item {
          display: flex;
          padding: 5px;
          padding-left: 10px;
          padding-top: 10px;
          justify-content: space-between;
          .detail {
            margin-left: -10px;
            width: 100px;
            .name {
              height: 20px;
              width: 130px;
              margin-bottom: 10px;
            }
            .content {
              font-size: 12px;
              color: rgb(178, 178, 178);
              height: 20px;
              width: 90px;
            }
          }
          .tip {
            .time {
              width: 100px;
              height: 25px;
              color: rgb(178, 178, 178);
              font-size: 12px;
              margin-right: 0px;
            }
            .notice {
              width: 20px;
              height: 20px;
              background-color: rgb(196, 196, 196);
              border-radius: 50%;
              color: white;
              font-size: 12px;
              text-align: center;
              line-height: 20px;
              margin-left: 80px;
            }
          }
        }

        div {
          img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
          }

          height: 55px;
        }
        div:hover {
          background-color: rgb(245, 245, 245);
        }
      }
    }

    .search-box {
      .search {
        display: flex;
        justify-content: center;
      }
      .el-input {
        width: 65%;
        height: 30px;
      }
      margin-top: 20px;
      width: 100%;
      height: 100px;
      .add-btn {
        margin-left: 10px;
      }
    }
  }

  .right {
    border-left: 1px solid #ccc;
    width: 755px;

    .dynamic {
      //换行
      flex-wrap: wrap;
      display: flex;

      .dynamic-item {
        width: 32.9%;
        height: 80px;
        margin-bottom: 100px;
        .header {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin: 10px;
          .more {
            margin-right: 15px;
          }
          .detail {
            margin-left: 5px;
            .name {
              margin-top: 2px;
              font-size: 18px;
            }
            .time {
              color: rgb(178, 178, 178);
              font-size: 12px;
            }
          }

          .left {
            border-right: none;
            display: flex;
          }
          display: flex;
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }
        .main {
          margin-left: 15px;
          img {
            width: 125px;
          }
        }
      }
    }
    .friend {
      img {
        height: 150px;
        width: 150px;
      }
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .el-divider {
      margin: 0;
    }
    .chat-header {
      height: 40px;
      margin-bottom: 10px;
      .chat-title {
        height: 100%;
        display: flex;
        justify-content: space-between;

        padding: 10px;
        padding-left: 25px;

        margin-top: 15px;

        .name {
          font-weight: 700;
          font-size: 18px;
        }
        .fuc {
          .el-icon {
            font-size: 25px;
            margin-right: 15px;
          }
        }
      }
    }
    .chat-content {
      .chat-frame {
        padding: 10px;
        height: 400px;
        background-color: rgb(242, 242, 242);
      }
      .send-box {
        height: 159px;

        .icon {
          display: flex;
          justify-content: space-between;

          div {
            width: 100px;
            height: 35px;
            border: none;
          }
          div:nth-child(2) {
            direction: rtl;
            margin-right: 10px;
          }
          .el-icon {
            margin-left: 5px;
            font-size: 20px;
          }
        }
        .send-btn {
          direction: rtl;
          display: flex;
          button {
            width: 100px;
          }
        }
      }
    }
  }
}
</style>
